<template>
  <main class="article shadow">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      row-key="id"
      @change="handleChange"
    >
      <template #type="{ text }">
        <a-tag :color="useColor(text)"> {{ text }} </a-tag>
      </template>
      <template #edit="{ text: { id } }">
        <a-button class="mx-1" danger @click="destroy(id)">删除</a-button>
        <a-button class="mx-1" type="primary" @click="update(id)"
          >更新</a-button
        >
        <a-button class="mx-1" @click="search(id)">查看</a-button>
      </template>
    </a-table>
    <section class="action">
      <a-button type="primary" @click="toEditorPage">创作</a-button>
    </section>
  </main>
</template>
<script>
import { Table } from "ant-design-vue";
import { articleViewConfig } from "@vp/manage/article.js";
import {
  useRouteParamChange,
  useRouteNameToPage,
  useRoutePathToPage,
  useRouteNameWithQueryToPage,
} from "@u/router.js";
import { useLinkedRouteParam } from "@u/route.js";
import { useColorMap } from "@u/color.js";
import { useState } from "@u/hook.js";
import { ref, watchEffect } from "vue";
import http, { lazyRequest } from "@u/http.js";
import { useErrorNotice, useSuccessNotice } from "@u/notice.js";

export default {
  components: {
    [Table.name]: Table,
  },
  setup() {
    const colorMap = new Map([
      ["blog", "#009688"],
      ["book", "#2196F3"],
    ]);
    const useColor = useColorMap(colorMap);
    const { columns, pagination } = articleViewConfig;
    const data = ref([]);
    const [loading, setLoading] = useState(false);
    // 难点在于这里 修改url的参数
    pagination.current = useLinkedRouteParam("pageNum");
    const pageNumParamChange = useRouteParamChange("pageNum");
    const toEditorPage = useRouteNameToPage("ManageEditor");
    const handleChange = ({ current }) => pageNumParamChange(current);
    // 网络请求 获取文章
    watchEffect(
      async () => {
        try {
          setLoading(true);
          const request = http.get(
            `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
          );
          const [res] = await lazyRequest(request);
          data.value = res.data.rows;
          pagination.total = res.data.count;
        } catch (error) {
          useErrorNotice({
            message: "文章列表获取失败",
            description: error.reason || "未知错误",
          });
        } finally {
          setLoading(false);
        }
      },
      {
        flush: "post", // 默认pre 表示页面渲染前出发 post 表示页面渲染后出发 用于防止页面跳转时出现的错误
      }
    );

    const destroy = async (id) => {
      try {
        setLoading(true);
        await http.delete(`/articles/${id}`);
        const request = http.get(
          `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
        );
        const [res] = await lazyRequest(request, 200);
        data.value = res.data.rows;
        pagination.total = res.data.count;
        useSuccessNotice({
          message: "删除成功",
        });
      } catch (error) {
        useErrorNotice({
          message: "删除失败",
          description: error.reason || "未知错误",
        });
      } finally {
        setLoading(false);
      }
    };

    const search = (id) => {
      const toDetail = useRoutePathToPage(`/details/${id}`);
      toDetail();
    };

    const update = useRouteNameWithQueryToPage("ManageEditor", "id");

    return {
      columns,
      data,
      pagination,
      useColorMap,
      useColor,
      handleChange,
      toEditorPage,
      loading,
      destroy,
      search,
      update,
    };
  },
};
</script>

<style scoped>
.article {
  margin: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #cfd8dc;
}
.action {
  text-align: center;
}
</style>